<template>
    <view class="popup" v-if="visible">
      <view class="overlay" @click="closePopup"></view>
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">{{ title }}</text>
          <text class="popup-close" @click="closePopup">关闭</text>
        </view>
        <view class="popup-body">
          <slot></slot>
        </view>
        <view class="popup-footer">
          <button class="popup-button" @click="confirm">确定</button>
          <button class="popup-button" @click="cancel">取消</button>
        </view>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: '提示'
      }
    },
    methods: {
      closePopup() {
        this.$emit('update:visible', false);
      },
      confirm() {
        this.$emit('confirm');
      },
      cancel() {
        this.$emit('cancel');
      }
    }
  };
  </script>
  
  <style scoped>
  .popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .popup-content {
    position: relative;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    width: 80%;
    max-width: 300px;
  }
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .popup-title {
    font-size: 18px;
    font-weight: bold;
  }
  
  .popup-close {
    font-size: 14px;
    color: #999;
  }
  
  .popup-body {
    margin-bottom: 20px;
  }
  
  .popup-footer {
    display: flex;
    justify-content: space-between;
  }
  
  .popup-button {
    background-color: #007aff;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
  }
  </style>
  